const mymodal = document.querySelector('#addModal')
const modal = new bootstrap.Modal(mymodal, { keyboard: false, backdrop: 'static' })
const form = document.querySelector('.add-form')
const ps = document.querySelector('[name=province]')
const cs = document.querySelector('[name=city]')
const rs = document.querySelector('[name=county]')
async function getStudent () {
  const res = await axios({
    url: 'student/list',
  })
  const ress = res.data.data.reverse()
  document.querySelector('tbody').innerHTML = ress.map(i => `<tr>
        <th scope="row">${i.id}</th>
        <td>${i.name}</td>
        <td>${i.age}</td>
        <td>${i.sex}</td>
        
        <td>${i.group}</td>
        <td>${i.phone}</td>
        <td>${i.salary}</td>
        <td>${i.truesalary}</td>
        <td>${i.province}${i.city}${i.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm" data-id=${i.id}>修改</button>
          <button type="button" class="btn btn-danger btn-sm" data-id=${i.id}>删除</button>
        </td>
      </tr>`).join('')
}
getStudent()

async function getProvince () {
  const pres = await axios({ url: 'geo/province' })
  ps.innerHTML = pres.data.map(i => `<option selected value="${i}">${i}</option>`).join('') + `<option selected value="">--省--</option>`
}

async function getCity (cdata) {
  const cres = await axios({ url: 'geo/city', params: { pname: cdata.province || cdata } })
  cs.innerHTML = cres.data.map(i => `<option selected value="${i}">${i}</option>`).join('') + `<option selected value="">--市--</option>`
  if (cdata.city) {
    cs.value = cdata.city
  }
}
async function getCounty (data, i) {
  const rres = await axios({ url: 'geo/county', params: { pname: data.province || data, cname: i.city || i } })
  rs.innerHTML = rres.data.map(i => `<option selected value="${i}">${i}</option>`).join('') + `<option selected value="">--区--</option>`
  if (data.county) {
    rs.value = data.county
  }
}

getProvince()

ps.addEventListener('change', () => {
  getCity(ps.value)
  rs.innerHTML = `<option selected value="">--区--</option>`
})

cs.addEventListener('change', () => {
  getCounty(ps.value, cs.value)
})

document.querySelector('.btnAddStu').addEventListener('click', () => {
  modal.show()
  form.reset()
  document.querySelector('.addModalLabel').innerHTML = '录入新学员'
  document.querySelector('.btnAddStudent').innerHTML = '确定添加'

})

//提交
document.querySelector('.btnAddStudent').addEventListener('click', async e => {
  e.preventDefault()
  const data = {
    name: document.querySelector('[name=name]').value,
    age: document.querySelector('[name=age]').value,
    group: document.querySelector('[name=group]').value,
    sex: document.querySelector('[name=sex]').value,
    phone: document.querySelector('[name=phone]').value,
    salary: document.querySelector('[name=salary]').value,
    truesalary: document.querySelector('[name=truesalary]').value,
    province: ps.value,
    city: cs.value,
    county: rs.value,
  }
  try {
    if (id) {
      data.id = id
      const res = await axios({ url: 'student/update', method: 'put', data })
      Toast.success(res.data.message)
    } else {
      const res = await axios({ url: 'student/add', method: 'post', data })
      Toast.success(res.data.message)
    }
  } catch (e) {
    Toast.fail(e.response)
  }
  modal.hide()
  getStudent()
})

//删除
let id
document.querySelector('tbody').addEventListener('click', async e => {
  id = e.target.dataset.id
  if (e.target.classList.contains('btn-danger')) {
    const res = await axios({ url: 'student/delete', method: 'delete', params: { id } })
    Toast.success(res.data.message)
  }

  if (e.target.classList.contains('btn-primary')) {
    modal.show()
    form.reset()
    document.querySelector('.addModalLabel').innerHTML = '编辑学员'
    document.querySelector('.btnAddStudent').innerHTML = '确定编辑'

    const re = await axios({ url: 'student/one', params: { id } })
    getCity(re.data.data)
    getCounty(re.data.data, re.data.data)
    Object.keys(re.data.data).forEach(i => {
      let el = document.querySelector(`[name=${i}]`)
      if (el) {
        if (i === 'sex') {
          const sexs = document.querySelectorAll(`[name=${i}]`)
          const index = re.data.data['sex'] === '男' ? 0 : 1
          sexs[+index].checked = true
        } else {
          document.querySelector(`[name=${i}]`).value = re.data.data[i]
        }

      }

    })
  }
  getStudent()
})